import { defineStore } from 'pinia';
import type {
  FlowNode,
  WorkflowDefinition,
  WorkflowInput,
  WorkFormComponentsRules
} from '@/utils/api/workflow/definition/type';
import type { WorkFormState } from './types/type';
import { getStepBodysAsync, createAsync, updateAsync } from '@/utils/api/workflow/definition';

// 静态表单组件数据 目前先写死后期可通过数据库配置
const formComponents: WorkflowInput[] = [
  {
    id: '',
    name: '',
    label: '单行文本',
    type: 'text',
    styles: [],
    value: ''
  },
  {
    id: '',
    name: '',
    label: '多行文本',
    type: 'textarea',
    styles: [],
    value: ''
  },
  {
    id: '',
    name: '',
    label: '复选框',
    type: 'checkbox',
    items: [
      { label: 'item1', value: 'item1' },
      { label: 'item2', value: 'item2' }
    ],
    styles: []
  },
  {
    id: '',
    name: '',
    label: '单选框',
    type: 'radio',
    items: [
      { label: 'item1', value: 'item1' },
      { label: 'item2', value: 'item2' }
    ],
    styles: []
  },
  {
    id: '',
    name: '',
    label: '文字',
    type: 'paragraph',
    styles: []
  },
  {
    id: '',
    name: '',
    label: '下拉选择框',
    type: 'select',
    items: [
      { label: 'item1', value: 'item1' },
      { label: 'item2', value: 'item2' }
    ],
    styles: []
  },
  {
    id: '',
    name: '',
    label: '日期选择器',
    type: 'datepicker',
    styles: [{ name: 'width', value: '100%' }]
  },
  {
    id: '',
    name: '',
    label: '日期段选择器',
    type: 'daterangepicker',
    styles: [{ name: 'width', value: '100%' }]
  },
  {
    id: '',
    name: '',
    label: '评分器',
    type: 'rate',
    styles: []
  },
  {
    id: '',
    name: '',
    label: '开关选择器',
    type: 'switch',
    styles: []
  },
  {
    id: '',
    name: '',
    label: '人民币输入框',
    type: 'money',
    styles: [{ name: 'width', value: '100%' }]
  },
  {
    id: '',
    name: '',
    label: '数字输入框',
    type: 'number',
    styles: [{ name: 'width', value: '100%' }]
  },
  {
    id: '',
    name: '',
    label: '图片上传',
    type: 'uploadImages',
    styles: []
  }
];

// 表单验证规则
const rules: WorkFormComponentsRules[] = [
  {
    name: 'required',
    label: '必填',
    value: { required: true, message: '此项必填' }
  },
  {
    name: 'number',
    label: '整数',
    value: { type: 'string', message: '请输入数字', pattern: /^-?\d+$/ }
  },
  {
    name: 'email',
    label: '邮箱',
    value: { type: 'email', message: '请输入正确的邮箱' }
  },
  {
    name: 'phonenumber',
    label: '手机号',
    value: { type: 'string', message: '请输入正确的手机号', pattern: /^1[3|4|5|7|8]d{9}$/ }
  }
];

// 流程节点数据
const nodes: Array<FlowNode> = [
  {
    id: '',
    key: 'start',
    title: '流程开始',
    icon: 'CaretRight',
    type: 'success',
    group: '1',
    parentNodes: [],
    nextNodes: [],
    position: [11, 11],
    stepBody: {},
    endpointOptions: [
      {
        anchor: 'Bottom',
        maxConnections: -1
      }
    ]
  },
  {
    id: '',
    key: 'end',
    title: '流程结束',
    icon: 'SuccessFilled',
    type: 'danger',
    group: '1',
    parentNodes: [],
    nextNodes: [],
    position: [11, 11],
    stepBody: {},
    endpointOptions: [
      {
        anchor: 'Top',
        maxConnections: -1
      }
    ]
  },
  {
    id: '',
    key: 'step',
    title: '任务节点',
    icon: 'Setting',
    type: 'primary',
    group: '2',
    parentNodes: [],
    nextNodes: [],
    position: [11, 11],
    stepBody: {},
    endpointOptions: [
      {
        anchor: 'Top',
        maxConnections: -1
      },
      {
        anchor: 'Bottom',
        maxConnections: -1
      }
    ]
  }
];

// jsplumb 配置
const jsPlumbOptions = {
  Endpoint: [
    'Dot',
    {
      radius: 4,
      cssClass: 'pink',
      hoverClass: 'pink'
    }
  ],
  PaintStyle: {
    stroke: '#b0bac3',
    strokeWidth: 2
  },
  HoverPaintStyle: {
    stroke: '#b0bac3',
    strokeWidth: 4
  },
  Container: 'jsplumb-container',
  Connector: ['Flowchart', { gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
  ConnectionOverlays: [
    [
      'Arrow',
      {
        width: 10,
        length: 10,
        location: 0.8
      }
    ],
    [
      'Label',
      {
        label: '',
        cssClass: '',
        id: 'label',
        labelStyle: {
          color: '#515a6e'
        },
        events: {
          click: function (labelOverlay: any, originalEvent: any) { }
        }
      }
    ]
  ]
};

// 终结点选项配置
const endpointOptions = {
  isSource: true,
  isTarget: true,
  connector: 'Flowchart',
  maxConnections: 1,
  paintStyle: {
    fill: '#b0bac3',
    strokeWidth: 1
  }
};

const useWorkflowStore = defineStore('WorkflowStore', {
  state: (): WorkFormState => {
    return {
      totalCount: 0,
      currentPage: 1,
      pageSize: 10,
      list: new Array<WorkflowDefinition>(),
      auditList: [],
      loading: false,
      editWorkflow: undefined,
      stepBodys: [],
      endpointOptions: endpointOptions,
      formComponents: formComponents,
      rules: rules,
      nodes: nodes,
      jsPlumbOptions: jsPlumbOptions
    };
  },
  getters: {
    getFormComponents: (state) => state.formComponents,
    getRules: (state) => state.rules,
    getNodes: (state) => state.nodes,
    getJsPlumbOptions: (state) => state.jsPlumbOptions,
    getEndpointOptions: (state) => state.endpointOptions,
    getStepBodys: (state) => state.stepBodys
  },
  actions: {
    setTotalCount(totalCount: number) {
      this.totalCount = totalCount;
    },
    setCurrentPage(currentPage: number) {
      this.currentPage = currentPage;
    },
    setPageSize(pageSize: number) {
      this.pageSize = pageSize;
    },
    async init() {
      this.stepBodys = await getStepBodysAsync();
    },
    async create(data: WorkflowDefinition) {
      await createAsync(data);
    },
    async update(id: string, version: string, input: WorkflowDefinition) {
      await updateAsync(id, version, input);
    }
  }
});

export default useWorkflowStore;
